<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>下拉和自动完成</title>
  <script src="./js/jexcel.js"></script>
  <script src="./js/jsuites.js"></script>
  <link rel="stylesheet" href="./css/jsuites.css" type="text/css" />
  <link rel="stylesheet" href="./css/jexcel.css" type="text/css" />
</head>

<body>
  <h1>下拉和自动完成</h1>
  <ul>
    <li>创建从阵列中创建一个简单的下拉</li>
    <li>提供值或键值选择框</li>
    <li>填充来自外部 JSON 请求的下拉</li>
    <li>基于另一列值的动态自动完成搜索</li>
    <li>有条件的降减：基于方法返回的降送选项</li>
    <li>多个选择和内部下拉搜索</li>
    <li>具有多种渲染类型的响应式数据拾取器</li>
    <li>图像图标和组项目</li>
  </ul>

  <h3>1、多种自动完成选项</h3>
  <div id="spreadsheet"></div>

  <h3>2、条件下拉</h3>
  <p>下面的示例显示了第二列与第一列之间的依赖关系。</p>
  <div id="spreadsheet2"></div>

  <h3>3、组、图像和高级渲染选项</h3>
  <p>使用响应式数据选择器改善用户体验。</p>
  <div id="spreadsheet3"></div>
</body>

<script>
  // 1、多种自动完成选项
  var data = [
    ['US', 'Wholemeal', 'Yes', '2019-02-12'],
    ['CA;US;UK', 'Breakfast Cereals', 'Yes', '2019-03-01'],
    ['CA;BR', 'Grains', 'No', '2018-11-10'],
    ['BR', 'Pasta', 'Yes', '2019-01-12'],
  ];

  jspreadsheet(document.getElementById('spreadsheet'), {
    data: data,
    columns: [
      { type: 'dropdown', width: '300', title: 'Product Origin', url: './static/countries.json', autocomplete: true, multiple: true },
      { type: 'text', width: '200', title: 'Description' },
      { type: 'dropdown', width: '100', title: 'Stock', source: ['No', 'Yes'] },
      { type: 'calendar', width: '100', title: 'Best before' },
    ]
  });

  // 2、条件下拉
  var data2 = [
    [3, 'Cheese', true],
    [1, 'Apples', true],
    [2, 'Carrots', true],
    [1, 'Oranges', false],
  ];

  let dropdownFilter = function (instance, cell, c, r, source) {
    var value = instance.jexcel.getValueFromCoords(c - 1, r);
    if (value == 1) {
      return ['Apples', 'Bananas', 'Oranges'];
    } else if (value == 2) {
      return ['Carrots'];
    } else {
      return source;
    }
  }

  jspreadsheet(document.getElementById('spreadsheet2'), {
    data: data2,
    columns: [
      { type: 'dropdown', title: 'Category', width: '300', source: [{ 'id': '1', 'name': 'Fruits' }, { 'id': '2', 'name': 'Legumes' }, { 'id': '3', 'name': 'General Food' }] },
      { type: 'dropdown', title: 'Food', width: '200', source: ['Apples', 'Bananas', 'Carrots', 'Oranges', 'Cheese'], filter: dropdownFilter },
      { type: 'checkbox', title: 'Buy', width: '100' },
    ],
    onchange: function (instance, cell, c, r, value) {
      if (c == 0) {
        var columnName = jspreadsheet.getColumnNameFromId([c + 1, r]);
        instance.jexcel.setValue(columnName, '');
      }
    }
  });

  // 3、组、图像和高级渲染选项
  var data3 = [
    [1, 'Morning'],
    [2, 'Morning'],
    [3, 'Afternoon'],
    [3, 'Evening'],
  ];

  jspreadsheet(document.getElementById('spreadsheet3'), {
    data: data3,
    columns: [
      {
        type: 'dropdown',
        title: 'Category',
        width: '300',
        source: [
          { id: '1', name: 'Paulo', image: './static/1.jpg', title: 'Admin', group: 'Secretary' },
          { id: '2', name: 'Cosme Sergio', image: './static/1.jpg', title: 'Teacher', group: 'Docent' },
          { id: '3', name: 'Rose Mary', image: './static/1.jpg', title: 'Teacher', group: 'Docent' },
          { id: '4', name: 'Fernanda', image: './static/1.jpg', title: 'Admin', group: 'Secretary' },
          { id: '5', name: 'Roger', image: './static/1.jpg', title: 'Teacher', group: 'Docent' },
        ]
      },
      {
        type: 'dropdown',
        title: 'Working hours',
        width: '200',
        source: ['Morning', 'Afternoon', 'Evening'],
        options: { type: 'picker' },
      },
    ]
  })
</script>

</html>